import React from 'react';
import { observer } from 'mobx-react';
import TemplateManageStore from '../../stores/list/TemplateManageStore';
import {WeaDialog, WeaLocaleProvider,WeaTableEdit,WeaRightMenu } from 'ecCom';
import { toJS } from 'mobx';
import { Button } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

export interface SetTemplateColumnProps {
    templateManageStore:TemplateManageStore
}
@observer
export default class SetTemplateColumn extends React.Component<SetTemplateColumnProps, any> {
    render() {
        const { templateManageStore } = this.props;
        return (
            <div>
                <WeaRightMenu 
                    datas={[{
                        key: 'save',
                        icon: <i className='icon-coms-Preservation' />,
                        content: getLabel(86, '保存', 'label'),
                    },{
                        key: 'close',
                        icon: <i className='icon-coms-Return' />,
                        content: getLabel(309,"关闭"),
                    }]}
                    onClick={key=>{
                        if(key=='save'){
                            templateManageStore.saveTemplateField();
                        }else if(key=='close'){
                            templateManageStore.visible_set=false;
                        }
                    }}
                >
                   <WeaTableEdit
                        isModalEdit={false}
                        columns={templateManageStore.columnsSet}
                        showAdd={false}
                        showDelete={false}
                        showCopy={false}
                        datas={toJS(templateManageStore.DatasSet)}
                        getRowSelection={() => { return null }}
                        onChange={data => {
                            templateManageStore.DatasSet=data;
                        }}
                    >
                    </WeaTableEdit>
                </WeaRightMenu>    
            </div >
        )
    }
}

@observer
export class SetTemplateColumnDialog extends React.Component<SetTemplateColumnProps, any>{
    render() {
        const { templateManageStore} = this.props;
        const {iconInfo } =templateManageStore;
        const buttons = [<Button onClick={()=>{templateManageStore.visible_set=false}}>{getLabel(309,"关闭")}</Button>,
        <Button type="primary" loading={templateManageStore.loading} onClick={()=>{templateManageStore.saveTemplateField();}}>{getLabel(86,'保存')}</Button>]
        return (
            <WeaDialog
                className='wea-auth-modal cube-dialog'
                buttons={buttons}
                title={getLabel(84342,'查询条件字段定义')}
                iconBgcolor={iconInfo.iconBg || "#96358a"}
                icon={iconInfo.icon ||'icon-coms-ModelingEngine'}
                iconFontColor={iconInfo.iconColor || "#fff"}
                visible={templateManageStore.visible_set}
                style={{ width: 700, height: 500 }}
                hasScroll={true}
                onCancel={()=>{templateManageStore.visible_set=false}}
            >
                <SetTemplateColumn templateManageStore={templateManageStore} />
            </WeaDialog >
        )
    }
}